<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 编码 -->
    <meta charset="UTF-8">
    <!-- 关键词 -->
    <meta name="Keywords" content="canvas">
    <!-- 描述 -->
    <meta name="Description" content="贪吃蛇">
    <title>贪吃蛇</title>
    <style>
         /*解决浏览器外边距不同的兼容问题*/
        * {
            margin: 0;
        }
        /* 行级元素使用auto不生效,需要转为块级元素 */
        canvas {
            background: rgb(159,194,224);
            margin: 100px auto;
            display: block;
            border: 10px solid #E0DAD3;
        }

    </style>
</head>
<body>
    <canvas id="canvas" width="450" height="450">

    </canvas>

    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        // 开始绘制  两点确定一条直线
        // ctx.moveTo(0,0);// 起点
        // ctx.lineTo(450,450);// 终点
        // ctx.stroke(); // 画线
        // 线条颜色
        ctx.strokeStyle = "#5f5f5f";

        var snack = [];// 定义蛇的所有的矩形的坐标
        var snackLength = 3;// 蛇的初始化长度
        var foodX = 60; // 食物的横坐标
        var foodY = 0; // 食物的纵坐标

        var direction = ["right","left","up","down"];// 方向
        var currentDirection = direction[0]; //当前的方向 默认向右

        // 绘制矩形  起点坐标 宽 高
        // ctx.fillRect(0,0,15,15);
        rect();
        init();
        initFood();
        var food = {
            x:foodX,
            y:foodY
        }
        addFood();


        function rect() {
            // 绘制网格
            for(var i = 0;i<30;i++){
                // 竖线
                ctx.moveTo(15*i,0);
                ctx.lineTo(15*i,450);
                ctx.stroke();

                // 横线
                ctx.moveTo(0,15*i);
                ctx.lineTo(450,15*i);
                ctx.stroke();
            }
        }

        // 初始化蛇
        function init() {
            for(var i = 0;i<snackLength;i++){
                snack[i] = {
                    x:i*15,// 横坐标
                    y:0 // 纵坐标
                }

                // 设置蛇头的颜色
                if(i === snackLength-1){
                    ctx.fillStyle = "red";
                }
                ctx.fillRect(15*i,0,15,15);
            }
        }

        function drawSnack() {
            ctx.fillStyle = "black";
            for(var i = 0;i<snackLength;i++){
                // 设置蛇头的颜色
                if(i === snackLength-1){
                    ctx.fillStyle = "red";
                }
                ctx.fillRect(snack[i].x,snack[i].y,15,15);
            }
        }

        // 食物的坐标
        function initFood() {
            foodX = Math.floor(Math.random()*30)*15;
            foodY = Math.floor(Math.random()*30)*15;
            // 避免与蛇的坐标重复
            for (var i = 0; i<snack.length;i++){
                if(foodX === snack[i].x && foodY === snack[i].y){
                    initFood();
                }
            }
        }

        // 绘制食物
        function addFood() {
            ctx.fillStyle = "green";
            ctx.fillRect(food.x,food.y,15,15);
        }

        function keyDown(){

            // 监听键盘事件
            document.onkeydown = function (event) {
                var go = true;
                switch (event.key) {
                    // 监听上下左右
                    case "ArrowRight":
                        if(currentDirection === direction[1]){
                            go = false;
                            break;
                        }
                        currentDirection = direction[0];
                        // clearSnack();
                        snack.push(
                            {
                                x:snack[snackLength -1].x + 15,
                                y:snack[snackLength - 1].y
                            }
                        );
                        break;
                    case "ArrowLeft":
                        // clearSnack();
                        if(currentDirection === direction[0]){
                            go = false;
                            break;
                        }
                        currentDirection = direction[1];
                        snack.push(
                            {
                                x:snack[snackLength -1].x - 15,
                                y:snack[snackLength - 1].y
                            }
                        );
                        break;
                    case "ArrowUp":
                        if(currentDirection === direction[3]){
                            go = false;
                            break;
                        }
                        currentDirection = direction[2];
                        // clearSnack();
                        snack.push(
                            {
                                x:snack[snackLength -1].x,
                                y:snack[snackLength - 1].y - 15
                            }
                        );
                        break;
                    case "ArrowDown":
                        if(currentDirection === direction[2]){
                            go = false;
                            break;
                        }
                        currentDirection = direction[3];
                        // clearSnack();
                        snack.push(
                            {
                                x:snack[snackLength -1].x,
                                y:snack[snackLength - 1].y + 15
                            }
                        );
                        break;
                }
                if(go){
                    // 删除掉第一个元素
                    snack.shift();
                    ctx.clearRect(0,0,450,450);
                    rect();
                    drawSnack();
                    addFood();
                }

            }
        }

        window.onload = function () {
            keyDown();
        }


    </script>
</body>
</html>